<template>
    <div class="middle">
        <el-row type="flex">
            <el-col :sm="12" class="left-side">
                <el-card class="box-card">
                    <div class="left-title">
                        <div>公告列表</div>
                        <el-button  @click="announce">发布公告</el-button>
                    </div>
                    <ul v-loading='leftLoading'>
                        <li @click="seeNotice(item.articleId)" v-for="item in leftList" :key="item.articleId">
                            <!-- <span class="note"></span> -->
                            <span class="intro" :title='item.title'>{{item.title}}</span>
                            <span class="time">{{item.createTime}}</span>
                        </li>
                    </ul>
                    <div class="left-footer"><el-button type="text" class="btn-success" @click="moreNotice">查看更多</el-button></div>
                </el-card>
            </el-col>
            <el-col :sm="12" class="right-side">
                <el-card class="box-card">
                    <div class="right-title">
                        <div>资料下载</div>
                        <el-button  @click="uploadFile">上传资料</el-button>
                    </div>
                    <ul v-loading="rightLoading">
                        <li v-for="item in rightList" :key="item.articleId">
                            <!-- <span class="note"></span> -->
                            <span class="intro" :title='item.title'>{{item.title}}</span>
                            <el-button type="text" class="btn-success download" @click="downloadDetails(item.articleId)">下载详情</el-button>
                            <el-button type="text" class="btn-success download des-btn"  @click="download(item.fileUrl)">下载</el-button>
                        </li>
                    </ul>
                    <div class="left-footer"><el-button type="text" class="btn-success" @click="moreInfor">查看更多</el-button></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import { getLeftList, getRightList } from 'api/bulletinBoard';
    export default {
        name: 'noticeMess',
        data() {
            return {
                leftList: [],
                rightList: [],
                leftLoading: true,
                rightLoading: true
            };
        },
        created() {
            this.getLeftListFu();
            this.getRightListFu();
        },
        methods: {
            // 管理员左侧列表查询
            getLeftListFu() {
                getLeftList().then(res => {
                    this.leftLoading = false;
                    if (res.data.status == 200) {
                        this.leftList = res.data.content;
                    } else {
                        this.$message.error(res.data.errorMsg);
                    }
                }).catch(() => {
                    this.leftLoading = false;
                });
            },

            // 管理员右侧列表查询
            getRightListFu() {
                getRightList().then(res => {
                    this.rightLoading = false;
                    if (res.data.status == 200) {
                        this.rightList = res.data.content;
                    } else {
                        this.$message.error(res.data.errorMsg);
                    }
                }).catch(() => {
                    this.rightLoading = false;
                });
            },

            // 公告列表分页
            moreNotice() {
                this.$router.push({ path: 'noticeList' });
            },

            // 资料下载列表分分页
            moreInfor() {
                this.$router.push({ path: 'messageList' });
            },

            // 查看公告
            seeNotice(articleId) {
                this.$router.push({ path: `newsDetail/1/${articleId}`});
            },

            // 下载详情
            downloadDetails(downloadId) {
                this.$router.push({ path: `downloadDetails/${downloadId}`});
            },

            // 下载
            download(fileUrl) {
                window.location.href = fileUrl;
            },

            // 上传资料
            uploadFile() {
                this.$router.push({ path: 'uploadFile' });
            },

            // 发布公告
            announce() {
                this.$router.push({ path: 'announce' });
            }

        }
    };

    
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  
    ul{
        list-style: none;
    }
    .middle{
        @mixin title {
            display:flex;
            justify-content: space-between;
            font-size:18px;
            color:#333;
            margin-bottom:16px;
        }
        @mixin ul-list {
            overflow: hidden;
            li{
                font-size:14px;
                color:#333;
                height: 52px;
                line-height: 52px;
                border-bottom: 1px solid #ddd;
                .note{
                    background: #8BC34A;
                    margin-right: 5px;
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    border: 1px solid #ddd;
                    border-radius: 50%;
                    margin-bottom: 15px;
                }
                .intro {
                    display: inline-block;
                    width: 50%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .time{
                    float: right;
                }
                .download{
                        float: right;
                        padding-top: 16px;
                }
            }
        }
        @mixin footer{
            // overflow: hidden;
            margin-top: 20px;
            .btn-primary, .btn-success{
                float: right;
                padding-right: 0;
            }
            .des-btn{
                padding-right:12px;
            }
        }
        @mixin btn {
            height: 34px;
            border-radius: 2px;
            border: solid 1px rgba(153, 153, 153, 0.7);
            color: #666666;
            margin-top: -4px;
        }
        .left-side{
            padding: 7px;
            .left-title{
                @include title;
                @include footer;
                margin-top: 6px;
                .btn {
                    @include btn;
                }
            }
            ul{
                height: 274px;
                @include ul-list;
                li{
                    cursor: pointer;
                }
            }
            .left-footer{
                overflow: hidden;
                @include footer;
            }
        }
        .right-side{
            padding: 7px;
            .right-title{
                @include title;
                @include footer;
                margin-top: 6px;
                .btn {
                    @include btn;
                }
            }
            ul{
                height: 270px;
                @include ul-list;
                @include footer;
            }
            .left-footer{
                overflow: hidden;
                @include footer;
            }
        }
    }
    
</style>
